<template>
  <div class="app-container flex-column">
    <div class="g-box">
      <FormList ref="formList" :formParams="serchParams" :options="serchOptions" @serch="onSerch">
        <template #zdy="row">
          {{ row }}
        </template>
      </FormList>
      {{ serchParams }}
    </div>
  </div>
</template>

<script>
import FormList from '@/components/Common/FormList'
export default {
  name: "FormDemo",
  components: {
    FormList
  },
  data() {
    return {
      serchParams: {
        a: '',
        b: [],
        c: '',
        d: '',
        e: '',
        f: 1,
        g: '',
        h: []
      },
      serchOptions: {
        inline: false,
        labelWidth: '7em',
        isSubmit: true,
        columns: [
          {
            type: 'radio',
            prop: 'a',
            label: '单选框：',
            options: [
              {
                value: '选项1',
                key: '黄金糕'
              }, {
                value: '选项2',
                key: '双皮奶'
              }
            ],
            optionsProps: {
              label: 'key',
              value: 'value'
            },
            change:(value) => {
              console.log(this, value, 'a')
            }
          },
          {
            type: 'checkbox',
            prop: 'b',
            label: '多选框：',
            options: [
              {
                value: '选项1',
                key: '黄金糕'
              }, {
                value: '选项2',
                key: '双皮奶'
              }
            ],
            optionsProps: {
              label: 'key',
              value: 'value'
            },
            change:(value) => {
              console.log(this, value, 'b')
            }
          },
          {
            type: 'text',
            prop: 'c',
            label: '输入框：',
            placeholder: "请输入仓库编号",
            clearable: false,
            disabled: false,
            showWordLimit: true,
            maxlength: 10,
            prefixIcon: 'el-icon-search',
            suffixIcon: 'el-icon-date',
            rules: [
              { required: true, message: '请输入', trigger: 'blur' }
            ],
            blur:(e) => {
            },
            change:(value) => {
              console.log(this, value, 'c')
            }
          },
          {
            type: 'textarea',
            prop: 'd',
            label: '输入框：',
            placeholder: "请输入编号",
            clearable: false,
            disabled: false,
            showWordLimit: true,
            maxlength: 100,
            rows: 4,
            blur:(e) => {
            },
            change:(value) => {
              console.log(this, value, 'd')
            }
          },
          {
            type: 'select',
            prop: 'e',
            label: '选择器：',
            options: [
              {
                value: '选项1',
                key: '黄金糕'
              }, {
                value: '选项2',
                key: '双皮奶'
              }
            ],
            optionsProps: {
              label: 'key',
              value: 'value'
            },
            rules: [
              { required: true, message: '请选择', trigger: 'change' }
            ],
            change:(value) => {
              console.log(this, value, 'e')
            }
          },
          {
            type: 'switch',
            prop: 'f',
            label: '开关：',
            activeValue: 1,
            inactiveValue: 0,
            change:(value) => {
              console.log(this, value, 'f')
            }
          },
          {
            type: 'date',
            typeDate: 'datetimerange',
            prop: 'g',
            label: '日期：',
            prefixIcon: 'el-icon-date',
            change:(value) => {
              console.log(this, value, 'g')
            }
          },
          {
            type: 'tree',
            prop: 'h',
            label: '选择树：',
            multiple: true,
            appendToBody: false,
            defaultExpandLevel: 2,
            valueConsistsOf: 'ALL',
            limit: 3,
            limitText:(count) =>{
              return `+ ${count}`
            },
            options: [ 
              {
                id: 'A',
                name: 'a',
                children: [
                  {
                    id: 'AA',
                    name: 'aa'
                  },
                  {
                    id: 'AB',
                    name: 'ab',
                    children: [
                      {
                        id: 'ABA',
                        name: 'aba'
                      },
                      {
                        id: 'ABB',
                        name: 'abb'
                      }
                    ]
                  }
                ]
              },
              {
                id: 'b',
                name: 'b',
                children: [
                  {
                    id: 'ba',
                    name: 'ba'
                  },
                  {
                    id: 'bb',
                    name: 'bb'
                  }
                ]
              },
              {
                id: 'c',
                name: 'c'
              }
            ],
            rules: [
              { required: true, message: '请选择树', trigger: 'change' }
            ],
            normalizer(node) {
              return {
                label: node.name
              }
            },
            input:(value) => {
              // 单个字段校验
              this.$refs['formList'].$refs['form'].validateField('h')
              console.log(this, value, 'h')
            }
          },
          {
            prop: 'zdy',
            label: '插槽：',
            slots: true
          }
        ]
      }
    };
  },
  created() {
  },
  methods: {
    onSerch(){
      console.log('搜索成功', this.serchParams)
    }
  }
};
</script>

<style scoped lang="scss"></style>

